<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="12" :sm="8">
                <a-form-item label="角色名称">
                  <a-input placeholder="请输入角色名称" v-model="queryParam.categoryName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>

        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
            >项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            <CustomColList :propsDefColumns.sync="columns" @refresh="loadData" />
          </div>

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              type: 'radio',
            }"
            @change="handleTableChange"
            :scroll="{ x: true }"
          >
            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
            <span slot="admin" slot-scope="text, record">
              <a-switch
                checked-children="超级权限"
                un-checked-children="普通权限"
                :checked="text == 1 ? true : false"
                @change="changeStatus(...arguments, record.id)"
              />
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24" v-if="roleId">
      <UserList :roleId="roleId"  />
    </a-col>
    <RoleModal ref="modalForm" @ok="modalFormOk" />
  </a-row>
</template>

<script>
import { ListMixin } from '../../mixins/ListMixin';
import CustomColList from '@/components/custom/CustomColList';
import UserList from './UserList';
import RoleModal from './modules/RoleModal';
import { postAction } from '@/api/basic';
export default {
  name: 'RoleUserList',
  mixins: [ListMixin],
  components: {
    CustomColList,
    UserList,
    RoleModal,
  },
  data() {
    return {
      description: '角色列表',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: '角色名称',
          align: 'center',
          dataIndex: 'roleName',
        },

        {
          title: '权限',
          align: 'center',
          dataIndex: 'admin',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'admin' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 60,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/role/list',
        edit: '/role/edit',
        delete: '/role/delete',
      },
    };
  },
  computed: {
    leftColMd() {
      return this.selectedRowKeys.length === 0 ? 24 : 12;
    },
    rightColMd() {
      return this.selectedRowKeys.length === 0 ? 0 : 12;
    },
    roleId() {
      return this.selectedRowKeys.length === 0 ? null : this.selectedRowKeys[0];
    },
  },
  methods: {
    changeStatus(val, e, id) {
      postAction(this.url.edit, {
        id: id,
        admin: val ? 1 : 0,
      }).then((res) => {
        if (res.success) {
          this.$message.success('权限更改成功');
          this.loadData();
        } else {
          this.$message.error('权限更改失败,' + res.message);
        }
      });
    },
  },
};
</script>
<style scoped></style>
